<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@taglib prefix="mvc" uri="http://www.springframework.org/tags/form" %>
<%@taglib prefix="fmt" uri="http://www.springframework.org/tags" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title><fmt:message code="attend.th.MyAttendance" /></title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=10,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <link rel="stylesheet" type="text/css" href="../../lib/fullcalendar/css/fullcalendar.css"/>
    <link rel="stylesheet" type="text/css" href="../../lib/fullcalendar/css/fullcalendar.print.css"/>
    <link rel="stylesheet" type="text/css" href="../lib/pagination/style/pagination.css"/>
    <link rel="stylesheet" type="text/css" href="../css/base.css"/>
    <link rel="stylesheet" type="text/css" href="../lib/laydate.css"/>
    <link rel="stylesheet" type="text/css" href="../css/attend/myAttendance.css"/>
    <link href="/css/leader/WdatePicker.css" rel="stylesheet" type="text/css">
    <script src="/js/common/language.js"></script>
    <script src="../js/jquery/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
    <script src="../lib/pagination/js/jquery.pagination.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="../js/base/base.js" type="text/javascript" charset="utf-8"></script>
    <script src="../lib/laydate/laydate.js" type="text/javascript" charset="utf-8"></script>
    <%--<script src="../lib/layer/layer.js?20201106" type="text/javascript" charset="utf-8"></script>--%>
    <script src="../js/jquery/jquery.cookie.js" type="text/javascript" charset="utf-8"></script>
    <script src="../js/leader/WdatePicker.js"></script>
    <%--<script src="../js/attend/myAttendance.js" type="text/javascript" charset="utf-8"></script>--%>
    <script src="../js/attend/attendanceSchedule/new.js" type="text/javascript" charset="utf-8"></script>
    <script src="../js/attend/attendanceSchedule/edit.js?20200507" type="text/javascript" charset="utf-8"></script>
    <script src="../js/common/basic.js" type="text/javascript" charset="utf-8"></script>


    <style>
        .ellipsis{
            display: inline-block;
            width: 220px;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }
        .fc-event{
            border: none;
            background-color: #fff;
        }
        .fc-event-inner img{
            vertical-align: middle;
            margin-right: 5px;
        }
        .fc-event-inner {
            width: 96%;
            overflow: hidden;
            margin: 0 auto;
        }
        .inp{
            width: 214px;
            height: 26px;
            border-radius: 4px;
            border: 1px solid #ccc;
            font-size: 12px;
            margin: 0;
            font-family: Microsoft yahei,Helvetica Neue,Helvetica,PingFang SC,Tahoma,Arial,sans-serif;
        }
        .next{
            width: 40px;
        }
        table{
            /*table-layout: fixed;*/
        }
        table tr td{
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
        }
        .head .one{
            -webkit-border-radius:20px;
            -moz-border-radius:20px;
            border-radius:20px;
            behavior: url(ie-css3.htc);
            position:relative;
            z-index: 100;
        }
        .table tr td{
            font-size:14px;
            height:30px;
            line-height:30px;
        }
        .title .div_Img{
            margin-left:22px;
        }
        .newLeave{
            margin-right:2%;
        }
        .table table{
            width: 80%;
            margin: 10px auto;
        }
        .table tr th{
            font-size: 13pt;
            padding: 10px;
            text-align: center;
        }

        .table tr td{
            font-size: 13pt;
            padding: 10px;
            text-align: center;
        }

        .table tr>td{
            font-size: 11pt;
        }
        .leave, .goOut, .busTravel{
            margin-top: 0px;
        }
        .addTable{
            width: 70%;
            margin: 10px auto;
        }
        .addTable tr{
            border: #ccc 1px solid;
        }
        .addTable tr td{
            padding: 8px;
        }
        .addTable tr td:first-of-type{
            width: 150px;
            text-align: left;
            border-right: #ccc 1px solid;
        }
        .addTable tr td input[type="text"]{
            width: 400px;
            border-radius: 5px;
        }
        .addTable tr td textarea{
            width: 400px;
            height: 80px;
            border-radius: 5px;
            vertical-align: middle;
        }
        .buttonBtn{
            width: 110px;
            margin: 0 auto;
        }
        .buttonBtn div{
            float: left;
            width: 50px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            cursor: pointer;
            color: #ffffff;
            background: #2b7fe0;
            border-radius: 4px;
        }
        .buttonBtn div:first-of-type{
            margin-right: 10px;
        }
        .piliangshezhi{
            padding: 6px 10px;
            cursor: pointer;
            color: #ffffff;
            background: #2b7fe0;
            border-radius: 4px;
        }
        .addTable table{
            width: 90%;
            margin: 10px auto;
        }
        .addTable table tr{
            border: #ccc 1px solid;
        }
        .addTable table tr th{
            font-size: 10pt;
            padding: 8px;
            color: #2F5C8F;
            font-weight: bold;
        }
        .addTable table tr td{
            text-align: center;
            border-right: #ccc 1px solid;
        }
        .addVisa{
            padding: 6px 10px;
            background: #2b7fe0;
            color: #ffffff;
            border-radius: 4px;
        }
        .setsbox{
            padding: 50px;
            box-sizing: border-box;
        }
        .siroc{
            color: rgb(0, 136, 204);
            border: 1px solid rgb(0, 136, 204);
            width: 50px;
            margin-left: 66px;
            text-align: center;
            padding: 6px;
        }
        .times span{
            /*margin-right: 20px;*/
            font-size: 13px;
            color: #000;
            display: inline-block;
            padding: 1px 17px 5px 10px;
        }
        .times{
            margin-left: 66px;
        }
        .ptimes span{
            /*margin-right: 20px;*/
            font-size: 13px;
            color: #000;
            display: inline-block;
            padding: 1px 17px 5px 10px;
        }
        .ptimes{
            margin-left: 66px;
        }
        .weekbox{
            height: 32px;
            line-height: 32px;
        }
        .weekbox span{
            color: rgb(102, 102, 102);
            padding: 8px;
            margin-right: 10px;
            cursor: pointer;
            border: 1px solid rgb(221, 221, 221);
            border-radius: 2px;
        }
        .weekbox .active{
            color: rgb(0, 136, 204);
            border: 1px solid rgb(0, 136, 204);
            border-radius: 2px;
        }
        .specialday-wrap {
            display: inline-block;
            border-width: 1px;
            border-style: solid;
            border-color: rgb(221, 221, 221);
            border-image: initial;
            padding: 4px 6px 4px 15px;
            border-radius: 3px;
            margin: 5px 20px 5px 0px;
        }
        .dateTags{
            margin: 10px;
            white-space: initial;
        }

        .addTable{
            position: relative;
            height: 100%;
        }

        .dateTags a{
            margin-right: 10px;
            text-decoration: none;
            color: rgb(102, 102, 102);
            margin-left: 20px;
            font-size: 20px;
            margin-bottom: 0px;
        }

        .klis tr td a {
            font-size: 10pt;
        }
        .newsBtntwo{
            margin-right: 5px;
        }

        .addTable_readonly{
            position: absolute;
            height: 100%;
            width: 100%;
            z-index: 10;
        }

        .btn_rtn{
            float: right;
            width: 63px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            cursor: pointer;
            color: #ffffff;
            margin: 14px 33px 0 0;
            background: #2b7fe0;
            border-radius: 3px;
        }

    </style>
    <link rel="stylesheet" type="text/css" href="/css/commonTheme/${sessionScope.InterfaceModel}/commonTheme.css"/>
</head>
<body style="width: 99%;">
<div class="content">
    <div class="main">

        <div class="leave" style="display: block;">
            <div class="leaveList">
                <div class="title">
                    <div class="div_Img">
                        <img src="/img/commonTheme/${sessionScope.InterfaceModel}/icon_logProfile.png" style="vertical-align: middle;" alt="<fmt:message code="journal.th.MenuMain" />">
                    </div>
                    <div class="new">按分组设置排班</div>
                    <%--<div class="div_time" style="margin-left: 36%">--%>
                    <%--<span>2017年07月</span>--%>
                    <%--</div>--%>
                    <div class="newLeave" id="backs"><span style="margin-left: 26px;">返回</span></div>
                    <div class="newLeave" id="newLeave"><span style="margin-left: 26px;"><img style="margin-right: 4px;margin-left: -16px;margin-bottom: 2px;" src="../../img/mywork/newbuildworjk.png" alt="">新增排班</span></div>
                </div>
                <div class="table">
                    <table cellspacing="0" cellpadding="0" style="border-collapse:collapse;">
                        <%--<thead>--%>
                            <tr class="leaveData" style="background-color: #fff">
                                <th style="max-width: 50px">编号</th>
                                <th style="max-width: 100px">排班名称</th>
                                <th style="max-width: 100px">考勤类型</th>
                                <th>应用人员</th>
                                <th style="max-width: 50px">状态</th>
                                <th style="max-width: 200px">操作</th>
                            </tr>
                        <%--</thead>--%>
                        <tbody class="tbd">

                        </tbody>
                    </table>
                </div>
                <div class="div_page">
                    <div class="M-box3" id="outLeave">
                    </div>
                </div>
            </div>
        </div>
        <div class="addSchedule" style="display: none;">
            <div class="title">
                <div class="div_Img">
                    <img src="/img/commonTheme/${sessionScope.InterfaceModel}/icon_logProfile.png" style="vertical-align: middle;" alt="<fmt:message code="journal.th.MenuMain" />">
                </div>
                <div class="new newcls">新增排班</div>
                <div class="new editcls" style="display: none">编辑排班</div>
                <div class="btn_rtn"  style="display: none">返回</div>
            </div>
            <table class="addTable" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">
                <div class="addTable_readonly" style="display: none"></div>
                <tr>
                    <td>排班名称：<span style="color: #ff0000;">*</span></td>
                    <td><input type="text" id="asname" value=""></td>
                </tr>
                <tr>
                    <td>设置范围（部门）：</td>
                    <td>
                        <textarea name="dept" id="s1" disabled></textarea>
                        <a href="javascript:;" style="margin: 0 10px;" id="a1" class="a1">添加</a>
                        <a href="javascript:;" class="clear">清空</a>
                    </td>
                </tr>
                <tr>
                    <td>设置范围（角色）：</td>
                    <td>
                        <textarea name="priv" id="s2" disabled></textarea>
                        <a href="javascript:;" style="margin: 0 10px;" id="a2" class="a2">添加</a>
                        <a href="javascript:;"  class="clear">清空</a>
                    </td>
                </tr>
                <tr>
                    <td>设置范围（人员）：</td>
                    <td>
                        <textarea name="user" id="s3" disabled></textarea>
                        <a href="javascript:;" style="margin: 0 10px;" id="a3" class="a3">添加</a>
                        <a href="javascript:;"  class="clear">清空</a>
                    </td>
                </tr>
                <%--<tr class="ispai" style="display: none">--%>
                    <%--<td>是否启用：</td>--%>
                    <%--<td>--%>
                        <%--<div>--%>
                            <%--<label>--%>
                                <%--<input type="radio" name="ispclas" value="0" checked>--%>
                                <%--<span>停用排班</span>--%>
                            <%--</label>--%>
                            <%--<label>--%>
                                <%--<input type="radio" name="ispclas" value="1">--%>
                                <%--<span style="margin-right: 20px;">启用排班</span>--%>
                            <%--</label>--%>
                        <%--</div>--%>
                    <%--</td>--%>
                <%--</tr>--%>
                <tr>
                    <td>考勤类型：</td>
                    <td>
                        <%--<div>--%>
                            <%--<label>--%>
                                <%--<input type="radio" name="kqtype" value="1" checked>--%>
                                <%--<span style="margin-right: 20px;">固定班制</span>--%>
                            <%--</label>--%>
                            <%--<label>--%>
                                <%--<input type="radio" name="kqtype" value="2">--%>
                                <%--<span>弹性工时</span>--%>
                            <%--</label>--%>
                        <%--</div>--%>
                        <div class="gudingbanzhi" style="display: block;">
                            <div>
                                <span><span style="color: #ff0000;">*</span>起始日期：</span>
                                <input type="text" id="dateStart" name="" value="" style="width: 180px;" onclick="laydates()">
                                <span>-</span>
                                <input type="text" id="dateEnd" name="" value="" style="width: 180px;" onclick="laydatex()">
                                <input type="checkbox" name="yearRepeat" value="">
                                <span>按年重复</span>
                                <div class="piliangshezhi" style="display: inline-block;float: right;">批量设置班次</div>
                                <table border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse;" class="klis">
                                    <tr>
                                        <th>考勤周期</th>
                                        <th style="width: 170px;">第一次签到 - 第一次签退</th>
                                        <th style="width: 170px;">第二次签到 - 第二次签退</th>
                                        <th style="width: 170px;">第三次签到 - 第三次签退</th>
                                        <th style="width: 120px;">排班时长</th>
                                        <th>操作</th>
                                    </tr>
                                    <tr class="mondayId" data-sid="0">
                                        <td style="text-align: center;font-size: 9pt">星期一</td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td class="oshour" data-hour="0"></td>
                                        <td>
                                            <a href="javascript:;" style="margin-right: 10px;" class="sets">设置</a>
                                            <a href="javascript:;" class="dels">删除</a>
                                        </td>
                                    </tr>
                                    <tr class="tuesdayId" data-sid="0">
                                        <td style="text-align: center;font-size: 9pt">星期二</td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td class="oshour" data-hour="0"></td>
                                        <td>
                                            <a href="javascript:;" style="margin-right: 10px;" class="sets">设置</a>
                                            <a href="javascript:;" class="dels">删除</a>
                                        </td>
                                    </tr>
                                    <tr class="wednesdayId" data-sid="0">
                                        <td style="text-align: center;font-size: 9pt">星期三</td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td class="oshour" data-hour="0"></td>
                                        <td>
                                            <a href="javascript:;" style="margin-right: 10px;" class="sets">设置</a>
                                            <a href="javascript:;" class="dels">删除</a>
                                        </td>
                                    </tr>
                                    <tr class="thursdayId" data-sid="0">
                                        <td style="text-align: center;font-size: 9pt">星期四</td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td class="oshour" data-hour="0"></td>
                                        <td>
                                            <a href="javascript:;" style="margin-right: 10px;" class="sets">设置</a>
                                            <a href="javascript:;" class="dels">删除</a>
                                        </td>
                                    </tr>
                                    <tr class="fridayId" data-sid="0">
                                        <td style="text-align: center;font-size: 9pt">星期五</td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td class="oshour" data-hour="0"></td>
                                        <td>
                                            <a href="javascript:;" style="margin-right: 10px;" class="sets">设置</a>
                                            <a href="javascript:;" class="dels">删除</a>
                                        </td>
                                    </tr>
                                    <tr class="saturdayId" data-sid="0">
                                        <td style="text-align: center;font-size: 9pt">星期六</td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td class="oshour" data-hour="0"></td>
                                        <td>
                                            <a href="javascript:;" style="margin-right: 10px;" class="sets">设置</a>
                                            <a href="javascript:;" class="dels">删除</a>
                                        </td>
                                    </tr>
                                    <tr class="sundayId" data-sid="0">
                                        <td style="text-align: center;font-size: 9pt">星期日</td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td class="oshour" data-hour="0"></td>
                                        <td>
                                            <a href="javascript:;" style="margin-right: 10px;" class="sets">设置</a>
                                            <a href="javascript:;" class="dels">删除</a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td style="text-align: center;">合计</td>
                                        <td colspan="5" class="heji">0小时0分</td>
                                    </tr>
                                </table>
                                <%--<input type="checkbox" name="isOut" value="">--%>
                                <%--<span>和外勤签到关联（开启后，在考勤时间范围内，可以进行外勤签到、签退）</span>--%>
                                <%--<div>--%>
                                    <%--<a href="javascript:;" class="addVisa" id="addVisa">添加特殊免签日期</a>--%>
                                    <%--<input type="text" name="" value="" style="width: 150px;" id="sj" disabled>--%>
                                <%--</div>--%>
                                <div class="dateTags">

                                </div>
                                <span style="color:rgb(245, 5, 5) ">说明：</span>
                                <p style="color:rgb(245, 5, 5) ">1.未设置班次的日期为公休日</p>
                                <%--<p style="color:rgb(245, 5, 5) ">2.设置特殊免签日后，当日无论是否安排班次按休息日计算</p>--%>
                                <p style="color:rgb(245, 5, 5) ">2.如果新建用户需要重新启用排班规则，该用户的排班才会生效</p>
                            </div>
                        </div>
                        <div class="danxingshijian" style="display: none;">
                            <p style="line-height: 40px;">
                                <span>核心工作日期：</span>
                                <label style="margin-right: 10px;">
                                    <input type="checkbox" name="fdays" value="1">
                                    <span>星期一</span>
                                </label>
                                <label style="margin-right: 10px;">
                                    <input type="checkbox" name="fdays" value="2">
                                    <span>星期二</span>
                                </label>
                                <label style="margin-right: 10px;">
                                    <input type="checkbox" name="fdays" value="3">
                                    <span>星期三</span>
                                </label>
                                <label style="margin-right: 10px;">
                                    <input type="checkbox" name="fdays" value="4">
                                    <span>星期四</span>
                                </label>
                                <label style="margin-right: 10px;">
                                    <input type="checkbox" name="fdays" value="5">
                                    <span>星期五</span>
                                </label>
                                <label style="margin-right: 10px;">
                                    <input type="checkbox" name="fdays" value="6">
                                    <span>星期六</span>
                                </label>
                                <label style="margin-right: 10px;">
                                    <input type="checkbox" name="fdays" value="7">
                                    <span>星期日</span>
                                </label>
                            </p>
                            <p style="line-height: 40px;">
                                <span>核心工作时段：</span>
                                <input type="text" name="workStart" style="width: 180px;" onclick="WdatePicker({onpicked:function(dq){},dateFmt:'HH:mm'})">
                                <span>-</span>
                                <input type="text" name="workEnd" style="width: 180px;" onclick="WdatePicker({onpicked:function(dq){},dateFmt:'HH:mm'})">
                            </p>
                            <p style="line-height: 40px;">
                                <span>每日工作时长：</span>
                                <input type="text" name="workHour" value="" style="width: 180px;">
                                <span>小时</span>
                                <span style="color: #ff0000;">*</span>
                            </p>
                            <span style="color:rgb(245, 5, 5) ">说明：</span>
                            <p style="color:rgb(245, 5, 5) ">1.设置核心工作日后，如当天没有考勤按旷工计算</p>
                            <p style="color:rgb(245, 5, 5) ">2.设置核心工作时段后，考勤时间按开始和结束时间计算迟到或早退</p>
                            <p style="color:rgb(245, 5, 5) ">3.弹性工时启用后及时生效</p>
                            <p style="color:rgb(245, 5, 5) ">4.设置了弹性工时的员工,个人上下班考勤均按弹性规则统计，请谨慎设置</p>
                            <p style="color:rgb(245, 5, 5) ">5.每日工作时长最小单位为0.5/半小时</p>
                        </div>
                    </td>
                </tr>
                <tr class="iptdetail">
                    <td colspan="2">
                        <div class="buttonBtn">
                            <div class="saveBtn" type="1">保存</div>
                            <div class="cancleBtn">取消</div>
                        </div>
                    </td>
                </tr>
            </table>
        </div>

    </div>
</div>
<script src="../js/attend/attendanceSchedule/list.js" type="text/javascript" charset="utf-8"></script>
<script>
    $(function () {
//        返回
        $('#backs').click(function () {
            parent.window.location.href='/attendanceWay/attindex'
        })
    //    点击新增排班
        $('#newLeave').click(function () {
            $('.saveBtn').attr('type',1);
            $('.leave').hide();
            $('.addSchedule').show();
        });


    //    点击取消
        $('.btn_rtn').click(function () {
//            $('.leave').show();
//            $('.addSchedule').hide();
            window.location.reload()

        });

        //    点击返回
        $('.cancleBtn').click(function () {
//            $('.leave').show();
//            $('.addSchedule').hide();
            window.location.reload()

        });


    //    点击固定班制或弹性工时
        $(':radio[name="kqtype"]').click(function () {
            var val=$(this).val();
            if(val == '1'){
                $('.gudingbanzhi').show();
                $('.danxingshijian').hide();
            }else {
                $('.gudingbanzhi').hide();
                $('.danxingshijian').show();
            }
        })

        //选择部门
        $('#a1').click(function(){
            dept_id="s1";
            $.popWindow("../../common/selectDept");
        })

        //选择角色
        $("#a2").on("click", function () {
            priv_id = 's2';
            $.popWindow("../common/selectPriv");
        });

        //选择人员
        $('.a3').click(function(){
            user_id="s3";
            $.popWindow("../../common/selectUser");
        });

        //清空
        $('.clear').click(function () {
            $(this).siblings('textarea').attr('deptid','');
            $(this).siblings('textarea').attr('deptname','');
            $(this).siblings('textarea').attr('privid','');
            $(this).siblings('textarea').attr('userpriv','');
            $(this).siblings('textarea').attr('dataid','');
            $(this).siblings('textarea').attr('username','');
            $(this).siblings('textarea').attr('user_id','');
            $(this).siblings('textarea').attr('userprivname','');
            $(this).siblings('textarea').val('');
        })

        //删除当前考勤
        $(document).on('click','.dels',function(){
            var nums=0;
            var ri =  $(this).parent().parent().find('td').eq(0).text();
            $(this).parent().parent('tr').attr('data-sid','');
            var tbs = '<td style="text-align: center;font-size: 9pt">'+ri+'</td>' +
                '<td></td>' +
                '<td></td>' +
                '<td></td>' +
                '<td class="oshour" data-hour="0"></td>' +
                '<td>' +
                '<a href="javascript:;" style="margin-right: 10px;" class="sets">设置</a>\n' +
                '<a href="javascript:;" class="dels">删除</a>\n' +
                '</td>'
            $(this).parent().parent('tr').html(tbs);
            $(".oshour").each(function(){
                nums += Number($(this).attr('data-hour'))
            });
            if(nums!=0){
                $('.heji').text(formatSeconds(nums))
            }else {
                $('.heji').text('0小时0分')
            }
        })


            //考勤类型>设置
        $(document).on('click','.sets',function(){
            var sid='';
            var tm1 = '-',tm2 = '-',tm3 = '-',hor='',miao=0;
            var that = this;
            layer.open({
                type: 1,
                title:['设置班次', 'background-color:#2b7fe0;color:#fff;'],
                area: ['500px', '400px'],
                shadeClose: true, //点击遮罩关闭
                // btn: ['创建', '取消'],
                content:'<div class="setsbox">' +
                '<ul>' +
                '<li class="clearfix" style="height:32px">' +
                '<label style="float:left;line-height:32px">考勤周期：</label><div class="siroc">星期一</div>' +
                '</li>' +
                '<li class="clearfix" style="height:32px;margin-top:20px;">' +
                '<label  style="line-height:32px">班次名称：</label>' +
                ' <select style=" padding:5px 0;border: 1px solid #ddd;border-radius: 4px;width: 200px;display: inline-block" class="portalType" name="portalType">'+
//                '<option value="">请选择</option>'+
                '</select>' +
                '</li>' +
                '<li class="clearfix" style="margin-top:20px;">' +
                '<label style="float:left">班次时间：</label>' +
                '<div class="times">' +
//                '<span>8:00:00-11:00:00</span>' +
//                '<span>8:00:00-11:00:00</span>' +
//                '<span>8:00:00-11:00:00</span>' +
//                '<span>10小时0分</span>' +
                '</div>' +
                '</li>' +
                '</ul>' +
                '</div>',
                btn: ['<fmt:message code="global.lang.save" />','<fmt:message code="depatement.th.quxiao" />'],
                btn1: function (index) {
                    var nums = 0;
                    var ri =  $(that).parent().parent().find('td').eq(0).text();
                    $(that).parent().parent('tr').attr('data-sid',sid);
                    var tbs = '<td style="text-align: center;font-size: 9pt">'+ri+'</td>' +
                        '<td>'+tm1+'</td>' +
                        '<td>'+tm2+'</td>' +
                        '<td>'+tm3+'</td>' +
                        '<td class="oshour" data-hour="'+miao+'">'+hor+'</td>' +
                        '<td>' +
                        '<a href="javascript:;" style="margin-right: 10px;" class="sets">设置</a>\n' +
                        '<a href="javascript:;" class="dels">删除</a>\n' +
                        '</td>'
                        $(that).parent().parent('tr').html(tbs);

                    $(".oshour").each(function(){
                        nums += Number($(this).attr('data-hour'))
                    });
                    if(nums!=0){
                        $('.heji').text(formatSeconds(nums))
                    }else {
                        $('.heji').text('0小时0分')
                    }
                    layer.close(index);
                },
                success:function(res){
                    var weekq = '';
                    var siroc =  $(that).parent().parent().find('td').eq(0).text();
                    $('.siroc').text(siroc)

                    $.ajax({
                        type:'post',
                        url:'/attendSchedule/getAttendSet',
                        dataType:'json',
                        success:function(res){
                            weekq = res.obj;
                            var str='';

                            fillsel('portalType',weekq,'sid','title',true);

                                if(weekq[0].atime1 != ''&&weekq[0].atime2 != ''){
                                    str+='<span>'+weekq[0].atime1+' - '+weekq[0].atime2+'</span>';
                                    tm1=weekq[0].atime1+' - '+weekq[0].atime2;
                                }
                                if(weekq[0].atime3 != ''&&weekq[0].atime4 != ''){
                                    str+='<span>'+weekq[0].atime3+' - '+weekq[0].atime4+'</span>';
                                    tm2=weekq[0].atime3+' - '+weekq[0].atime4;
                                }
                                if(weekq[0].atime5 != ''&&weekq[0].atime6 != ''){
                                    str+='<span>'+weekq[0].atime5+' - '+weekq[0].atime6+'</span>';
                                    tm3=weekq[0].atime5+' - '+weekq[0].atime6;
                                }
                                if(weekq[0].attendType == '1'){
                                    str =''
                                    str+='<span>'+weekq[0].workStart+'—'+weekq[0].workEnd+'</span>';
                                    tm1 = weekq[0].workStart+'-'+weekq[0].workEnd;
                                    tm2 =''
                                    tm3=''
                                }
                                if(weekq[0].duration != 0){
                                    str+='<span>'+weekq[0].duration+'</span>';
                                    hor = weekq[0].duration;
                                    miao= weekq[0].durationSeconde;
                                }

                                sid=weekq[0].sid;

                            $('.times').html(str)
                        }

                    })


                    $('.portalType').change(function () {
                        var newsid = $('.portalType option:selected').val();
                        var str='';
                            for(var i=0;i<weekq.length;i++){
                                if(weekq[i].sid == newsid){
                                    if(weekq[i].atime1 != ''&&weekq[i].atime2 != ''){
                                        str+='<span>'+weekq[i].atime1+' - '+weekq[i].atime2+'</span>';
                                        tm1=weekq[i].atime1+' - '+weekq[i].atime2;
                                    }
                                    if(weekq[i].atime3 != ''&&weekq[i].atime4 != ''){
                                        str+='<span>'+weekq[i].atime3+' - '+weekq[i].atime4+'</span>';
                                        tm2=weekq[i].atime3+' - '+weekq[i].atime4;
                                    }
                                    if(weekq[i].atime5 != ''&&weekq[i].atime6 != ''){
                                        str+='<span>'+weekq[i].atime5+' - '+weekq[i].atime6+'</span>';
                                        tm3=weekq[i].atime5+' - '+weekq[i].atime6;
                                    }
                                    if(weekq[i].attendType == '1'){
                                        str =''
                                        str+='<span>'+weekq[i].workStart+'—'+weekq[i].workEnd+'</span>';
                                        tm1 = weekq[i].workStart+'-'+weekq[i].workEnd;
                                        tm2 =''
                                        tm3=''
                                    }
                                    if(weekq[i].duration != 0){
                                        str+='<span>'+weekq[0].duration+'</span>';
                                        hor = weekq[0].duration;
                                        miao= weekq[0].durationSeconde;
                                    }
                                    sid = weekq[i].sid;
                                    $('.times').html(str)
                                }

                            }

                    })

                },

            });

        })

        //批量设置班次
        var psid='';
        $('.piliangshezhi').on('click',function () {
            var ptm1 = '-',ptm2 = '-',ptm3 = '-',phor='',pmiao=0,start='',end='',hours='';
            var that = this;

            layer.open({
                type: 1,
                title:['设置班次', 'background-color:#2b7fe0;color:#fff;'],
                area: ['650px', '400px'],
                shadeClose: true, //点击遮罩关闭
                // btn: ['创建', '取消'],
                content:'<div class="setsbox">' +
                '<ul>' +
                '<li class="clearfix" style="height:32px">' +
                '<label style="float:left;line-height:32px">考勤周期：</label>' +
                '<div class="weekbox">' +
                '<span class="active" dtas="mondayId">星期一</span>' +
                '<span class="active" dtas="tuesdayId">星期二</span>' +
                '<span class="active" dtas="wednesdayId">星期三</span>' +
                '<span class="active" dtas="thursdayId">星期四</span>' +
                '<span class="active" dtas="fridayId">星期五</span>' +
                '<span class="active" dtas="saturdayId">星期六</span>' +
                '<span class="active" dtas="sundayId">星期日</span></div>' +
                '</li>' +
                '<li class="clearfix" style="height:32px;margin-top:20px;">' +
                '<label  style="line-height:32px">班次名称：</label>' +
                ' <select style=" padding:5px 0;border: 1px solid #ddd;border-radius: 4px;width: 200px;display: inline-block" class="portalTypes" name="portalType">'+
//                '<option value="">请选择</option>'+
                '</select>' +
                '</li>' +
                '<li class="clearfix" style="margin-top:20px;">' +
                '<label style="float:left">班次时间：</label>' +
                '<div class="ptimes">' +
//                '<span>8:00:00-11:00:00</span>' +
//                '<span>8:00:00-11:00:00</span>' +
//                '<span>8:00:00-11:00:00</span>' +
//                '<span>10小时0分</span>' +
                '</div>' +
                '</li>' +
                '</ul>' +
                '</div>',
                btn: ['<fmt:message code="global.lang.save" />','<fmt:message code="depatement.th.quxiao" />'],
                btn1: function (index) {
                    var listarr = [];
                    var nmes = [];
                    var nums = 0;
                    var alisc =$('.active');
                    if($('.active').length>0){
                        $(".active").each(function(){
                            listarr.push($(this).attr('dtas'));
                            nmes.push($(this).text());
                        });
                        for(var i=0;i<listarr.length;i++){
                            $('.'+listarr[i]).attr('data-sid',psid);
                            var tbs = '<td style="text-align: center;font-size: 9pt">'+nmes[i]+'</td>' +
                                '<td>'+ptm1+'</td>' +
                                '<td>'+ptm2+'</td>' +
                                '<td>'+ptm3+'</td>' +
                                '<td class="oshour" data-hour="'+pmiao+'">'+phor+'</td>' +
                                '<td>' +
                                '<a href="javascript:;" style="margin-right: 10px;" class="sets">设置</a>\n' +
                                '<a href="javascript:;" class="dels">删除</a>\n' +
                                '</td>'
                            $('.'+listarr[i]).html(tbs);
                        }


                    }

                    $(".oshour").each(function(){
                        nums += Number($(this).attr('data-hour'))
                    });
                    if(nums!=0){
                        $('.heji').text(formatSeconds(nums))
                    }else {
                        $('.heji').text('0小时0分')
                    }


                    layer.close(index);

                },
                success:function(res){

                    $('.weekbox span').click(function () {
                        if($(this).hasClass('active')){
                            $(this).removeClass('active')
                        }else {
                            $(this).addClass('active')
                        }
                    })


                    $.ajax({
                        type:'post',
                        url:'/attendSchedule/getAttendSet',
                        dataType:'json',
                        success:function(res){
                            weekq = res.obj;
                            var str='';

                            fillsel('portalType',weekq,'sid','title',true);
                            $('select[name=portalType]').val($('.piliangshezhi').attr('portalType'));
                            if(weekq[0].atime1 != ''&&weekq[0].atime2 != ''){
                                str+='<span>'+weekq[0].atime1+' - '+weekq[0].atime2+'</span>';
                                ptm1=weekq[0].atime1+' - '+weekq[0].atime2;
                            }
                            if(weekq[0].atime3 != ''&&weekq[0].atime4 != ''){
                                str+='<span>'+weekq[0].atime3+' - '+weekq[0].atime4+'</span>';
                                ptm2=weekq[0].atime3+' - '+weekq[0].atime4;
                            }
                            if(weekq[0].atime5 != ''&&weekq[0].atime6 != ''){
                                str+='<span>'+weekq[0].atime5+' - '+weekq[0].atime6+'</span>';
                                ptm3=weekq[0].atime5+' - '+weekq[0].atime6;
                            }
                            if(weekq[0].attendType == '1'){
                                str =''
                                str+='<span>'+weekq[0].workStart+'—'+weekq[0].workEnd+'</span>';
                                ptm1 = weekq[0].workStart+'-'+weekq[0].workEnd;
                                ptm2 =''
                                ptm3=''
                            }
                            if(weekq[0].duration != 0){
                                str+='<span>'+weekq[0].duration+'</span>';
                                phor = weekq[0].duration;
                                pmiao= weekq[0].durationSeconde;
                            }

                            psid=weekq[0].sid;

                            $('.ptimes').html(str)
                        }

                    })

                    $('.portalTypes').change(function () {
                        var newsid = $('.portalTypes option:selected').val();
                        var str='';
                        for(var i=0;i<weekq.length;i++){
                            if(weekq[i].sid == newsid){
                                if(weekq[i].atime1 != ''&&weekq[i].atime2 != ''){
                                    str+='<span>'+weekq[i].atime1+' - '+weekq[i].atime2+'</span>';
                                    ptm1=weekq[i].atime1+' - '+weekq[i].atime2;
                                }
                                if(weekq[i].atime3 != ''&&weekq[i].atime4 != ''){
                                    str+='<span>'+weekq[i].atime3+' - '+weekq[i].atime4+'</span>';
                                    ptm2=weekq[i].atime3+' - '+weekq[i].atime4;
                                }
                                if(weekq[i].atime5 != ''&&weekq[i].atime6 != ''){
                                    str+='<span>'+weekq[i].atime5+' - '+weekq[i].atime6+'</span>';
                                    ptm3=weekq[i].atime5+' - '+weekq[i].atime6;
                                }
                                if(weekq[i].attendType == '1'){
                                    str =''
                                    str+='<span>'+weekq[i].workStart+'—'+weekq[i].workEnd+'</span>';
                                    ptm1 = weekq[i].workStart+'-'+weekq[i].workEnd;
                                    ptm2 =''
                                    ptm3=''
                                }
                                if(weekq[i].duration != 0){
                                    str+='<span>'+weekq[0].duration+'</span>';
                                    phor = weekq[0].duration;
                                    pmiao= weekq[0].durationSeconde;
                                }

                                $('.ptimes').html(str)
                                psid = weekq[i].sid;
                            }

                        }

                    })

                },

            });

        })

    })


    var dates = [];
    //免签日期
    $('#addVisa').click(function () {
        laydate({
            elem: '#sj', //指定元素
            event: 'click',
            format: 'YYYY-MM-DD',
            choose: function(date){ //选择好日期的回调
                if(dates.indexOf(date) == -1){
                    dates.push(date)
                    var str='';
                    for(var i=0;i<dates.length;i++){
                        str+='<div class="specialday-wrap" date-index='+i+'>' +
                            '<span class="specialDay">'+dates[i]+'</span>' +
                            '<a href="javascript:void(0)" class="deldates">×</a>' +
                            '</div>'
                    }

                    $('.dateTags').html(str)
                }
            }
        });

    })

//    删除免签日期
    $(document).on('click','.deldates',function(){
        var that = this;
        layer.confirm('是否要删除该免签日期？', {
            btn: ['确定','取消'], //按钮
            title:"删除"
        }, function(){
            var index = $(that).parent('div').attr('date-index')
            dates.splice(index, 1);
            $(that).parent('div').remove();
            layer.closeAll();
        }, function(){
            layer.closeAll();
        });
    });




    function laydates() {
        laydate({
            elem: '#dateStart',
            format: 'YYYY-MM-DD',
//                        min: laydate.now(), //设定最小日期为当前日期*/
//        max: '2099-06-16 23:59:59', //最大日期*/
            istime: true,
            istoday: false
//        choose: function(datas){
//            end.min = datas; //开始日选好后，重置结束日的最小日期
//            end.start = datas; //将结束日的初始值设定为开始日
//        }
        })
    }

    function laydatex() {
        laydate({
            elem: '#dateEnd',
            format: 'YYYY-MM-DD',
//                        min: laydate.now(), //设定最小日期为当前日期*/
//        max: '2099-06-16 23:59:59', //最大日期*/
            istime: true,
            istoday: false
//        choose: function(datas){
//            end.min = datas; //开始日选好后，重置结束日的最小日期
//            end.start = datas; //将结束日的初始值设定为开始日
//        }
        })
    }

//    时间转换
    function formatSeconds(value) {
        var secondTime = parseInt(value);// 秒
        var minuteTime = 0;// 分
        var hourTime = 0;// 小时
        if(secondTime > 60) {//如果秒数大于60，将秒数转换成整数
            //获取分钟，除以60取整数，得到整数分钟
            minuteTime = parseInt(secondTime / 60);
            //获取秒数，秒数取佘，得到整数秒数
            secondTime = parseInt(secondTime % 60);
            //如果分钟大于60，将分钟转换成小时
            if(minuteTime > 60) {
                //获取小时，获取分钟除以60，得到整数小时
                hourTime = parseInt(minuteTime / 60);
                //获取小时后取佘的分，获取分钟除以60取佘的分
                minuteTime = parseInt(minuteTime % 60);
            }
        }
        var result = "" + parseInt(secondTime) + "秒";

        if(minuteTime > 0) {
            result = "" + parseInt(minuteTime) + "分" + result;
        }
        if(hourTime > 0) {
            result = "" + parseInt(hourTime) + "小时" + result;
        }
        return result;
    }

</script>
</body>
</html>
